<template>
  <div class="Cell" @click="goArticlePage">
    <!-- 用户信息 -->
    <van-row class="UserInfo" align="center" type="flex" gutter="0">
      <van-col span="3">
        <van-image
          lazy-load
          round
          width="1.5rem"
          height="1.5rem"
          :src="userImg"
          fit="cover"
        />
      </van-col>
      <van-col span="3">{{ userName }}</van-col>
    </van-row>
    <!-- 标题 -->
    <p class="title">{{ title }}</p>
    <!-- 内容 -->
    <p class="Content">
      {{ content }}
    </p>
    <!-- 赞 评论 -->
    <van-row class="BottomRow">
      <van-col span="6">{{ reading }}&nbsp;浏览&nbsp;&nbsp;</van-col>
      <van-col span="6">{{ collection }}&nbsp;收藏&nbsp;&nbsp;</van-col>
      <van-col span="6">{{ like }}&nbsp;赞</van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    userImg: String,
    content: String,
    userName: String,
    reading: Number,
    collection: Number,
    like: Number,
    id: String,
  },
  methods: {
    goArticlePage() {
      this.$router.push({
        path: "/ArticlePage",
        query: {
          id: this.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.Cell {
  width: 100%;
  background-color: rgba(240, 248, 255, 0.638);
  margin-bottom: 15px;
}
.UserInfo {
  margin-left: 2%;
  padding-top: 10px;
  font-size: 12px;
}
.title {
  margin-left: 2%;
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 550;
}
.Content {
  margin-left: 2%;
  width: 96%;
  font-size: 14px;
  overflow: hidden;
  /* 2.用省略号来代替超出文本 */
  text-overflow: ellipsis;
  /* 3.设置盒子属性为-webkit-box  必须的 */
  display: -webkit-box;
  /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
  -webkit-line-clamp: 3;
  /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
  word-break: break-all;
  /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
  -webkit-box-orient: vertical;
}

.BottomRow {
  margin-left: 2%;
  margin-top: 5px;
  font-size: 10px;
}
</style>
